<template>
  <el-dialog
    top="30px"
    :title="title"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form @submit.native.prevent :inline="true">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          clearable
          class="form-control-ml"
          placeholder="客户名称"
          @keyup.enter.native="getAllData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.batch_no"
          clearable
          class="form-control-ml"
          placeholder="批次号"
          @keyup.enter.native="getAllData()"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params['warranty_amount.gte']"
          placeholder="担保金额大于(含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params['warranty_amount.gt']"
          placeholder="担保金额大于(不含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          @change="getAllData()"
          v-model="params['org_class.eq']"
          :options="enumCustomerType"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="区域查询"
          :topValue="'52'.padEnd(12, 0)"
          :bottomLevel="2"
          clearable
          @change="getAllData()"
        ></select-address>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params['warranty_period.gt']"
          placeholder="担保期限大于(不含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params['warranty_period.lte']"
          placeholder="担保期限小于(含)"
          v-input-number="{ min: 0 }"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="btn-long" @click="getAllData()" icon="el-icon-refresh" :loading="loading">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-button
      class="float-right m-1"
      icon="el-icon-download"
      :loading="exportLoading"
      @click="exportExcel('十二大产业贷')"
    >
      导出
    </el-button>
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          项目共计：
          <span class="text-danger">{{ totalCount }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          金额合计：
          <span class="text-danger">{{ tableFunds || '-' }}</span>
          万元
        </span>
      </div>
    </div>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { exportTable } from '@/bank/plugins/export'
import { dataAdapter } from '@/bank/views/limit/index'
import { enumCustomerType } from '@/bank/views/limit/index'
import SelectAddress from '@/components/select/SelectAddress'
export default {
  components: {
    SelectAddress,
  },
  props: {
    title: String,
    visible: Boolean,
    otherParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumCustomerType,
      tableName: 'datum_one_county_industry',
      loading: false,
      tableData: [],
      totalCount: 0,
      countLoading: false,
      tableFunds: '',
      params: {
        index: 1,
        size: 10,
      },
      tableColumns: [
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '联系人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '担保(放款)金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '担保期限(月)', prop: 'warranty_period', align: 'center' } },
        {
          attrs: { label: '放款日期', prop: 'load_date', align: 'center', minWidth: '100px' },
        },
        {
          attrs: { label: '还款日期', prop: 'load_end_date', align: 'center', minWidth: '100px' },
        },
        { attrs: { label: '银行项目经理', prop: 'bank_user_name', align: 'center' } },
        { attrs: { label: '借据号', prop: 'iou_no', align: 'left' } },
        { attrs: { label: '导入时间', prop: 'create_time', align: 'left', minWidth: '90px' } },
        { attrs: { label: '导入银行', prop: 'bank_name', align: 'left', minWidth: '90px' } },
        { attrs: { label: '批次号', prop: 'batch_no' } },
      ],
      exportLoading: false,
    }
  },
  computed: {},
  watch: {
    otherParams: {
      handler: function () {
        if (this.otherParams['bank_type.eq']) {
          this.params = {
            ...this.params,
            ...this.otherParams,
          }
          this.getAllData()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getAllData() {
      this.getData()
      this.getCountData()
    },
    getCountData() {
      this.countLoading = true
      this.$api
        .getData('credit', this.tableName, {
          ...this.params,
          index: '',
          size: '',
          groupFunc: 'round(sum(warranty_amount)|2)',
        })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          this.tableFunds = data.p || 0
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    exportExcel(name) {
      this.exportLoading = true
      const { index, size, ...params } = this.params
      const fields = this.tableColumns.map(item => item.attrs?.prop)
      exportTable({
        columns: this.tableColumns,
        table: this.tableName,
        params: { ...params, fields },
        order: {},
        adapter: dataAdapter,
        filename: name,
      }).finally(() => {
        this.exportLoading = false
      })
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = (res?.data?.data ?? []).map(item => {
            item.load_date = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd')
            item.load_end_date = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd')
            return item
          })
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
